<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popular-message：轻量级的信息反馈组件</title>
    <link rel="stylesheet" href="index.css">
    <style>
        div.code {
            white-space: pre;
        }
        button{
            padding: 0 10px;
            line-height: 25px;
        }
        h1 span{
            float: right;
            margin-top: 6px;
        }
    </style>
    <link href="https://unpkg.com/prismjs@1.23.0/themes/prism-okaidia.css" rel="stylesheet" />
    <script src="https://unpkg.com/prismjs@1.23.0/prism.js"></script>
</head>

<body>
    <div style="width: 600px; margin:0 auto">
    <h1>popular-message
        <a class="github-button" href="https://github.com/nihaojob/popular-message" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star nihaojob/popular-message on GitHub">Star</a>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    </h1>
    <p style="color: darkgray;">轻量级的信息反馈组件，在顶部居中显示，并自动消失。
        <br />
        有多种不同的提示状态可选择。
    </p>
    <p>
       Doc： <a href="https://github.com/nihaojob/popular-message/blob/main/README.md">中文</a> | 
        <a href="https://github.com/nihaojob/popular-message/blob/main/README-en.md">English</a>
    </p>

    <h3>Install</h3>
    <pre><code class="language-markup">$ yarn add popular-message</code></pre>
    <h3>Use</h3>
    <pre><code class="language-js">import $message from 'popular-message';
import 'popular-message/index.css';</code></pre>
    <h3>Example</h3>
    <button onclick="info()">info</button>
    <button onclick="success()">success</button>
    <button onclick="warning()">warning</button>
    <button onclick="error()">error</button>
    <button onclick="loading()">loading</button>
    <pre><code class="language-js">$message.info('这是一条普通的提示')
$message.success('这是一条成功的提示')
$message.warning('这是一条警告的提示')
$message.error('这是一条格式错误的提示')
$message.loading('正在加载中...')</code></pre>
    <button onclick="closeBtn()">close</button>
    <pre><code class="language-js">$message.info({
    content:'这是一条带关闭按钮的消息',
    onClose:() => console.log('关闭'),
    closable: true,
    duration: 2
})</code></pre>
    <button onclick="config()">config</button>
    <pre><code class="language-js">$message.config({
    top:85,
    duration: 4
})</code></pre>
    <button onclick="destroy()">destroy</button>
    <pre><code  class="language-js">$message.destroy()</code></pre>
</div>
    <script src="index.js"></script>
    <script>

        function info() {
            $message.info('这是一条普通的提示')
        }

        function success() {
            $message.success('这是一条成功的提示')
        }

        function warning() {
            $message.warning('这是一条警告的提示')
        }

        function error() {
            $message.error('这是一条格式错误的提示')
        }

        function loading() {
            $message.loading('正在加载中...')
        }


        function closeBtn() {
            $message.info({
                content: '这是一条带关闭按钮的消息',
                onClose: () => console.log('关闭'),
                closable: true,
                duration: 2
            })
        }
        function config() {
            $message.config({
                top: 85,
                duration: 4
            })
        }

        function destroy() {
            $message.destroy()
        }

    </script>
</body>

</html>